<template>
  <ul class="title-bar">
    <li class="title-item" v-for="(item, $index) in titleArray" :key="$index" :class="{'firstBtn': $index === 0, 'lastBtn':$index === titleArray.length-1}">
        <router-link :to=item.router active-class="active">{{item.name}}</router-link>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      titleArray: {
        type: Array,
        default() {
          return ['请在父组件输入标题']
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .title-bar
    display inline-flex
    width 100%
    height 58px
    line-height 58px
    text-align center
    border 2px solid #2ECC40
    border-radius 10px
    box-sizing border-box
    .title-item
      flex 1
      font-size 32px
      color #999
      border-right 2px solid #2ECC40
      &:last-child
        border-right none
      & > a
        display block
        width 100%
        height 100%
      &.firstBtn > a
        border-top-left-radius 5px
        border-bottom-left-radius 5px
      &.lastBtn > a
        border-top-right-radius 5px
        border-bottom-right-radius 5px
      .router-link-exact-active
        display block
        &.active
          color #fff
          background #2ECC40
</style>
